<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>直接分享用户</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <style>
    .aui-list .wechat-avatar {
      width: 3rem;
    }
    .wechat-avatar, .wechat-avatar > img {
      border-radius: 8px;
    }
    .aui-list .aui-list-item-text img {
      width: 14px;
      height: 14px;
    }
    .aui-list .aui-list-item-text {
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
    }
    .aui-list .aui-list-item-right {
      right: 20px;
      position: fixed;
    }
    .aui-list .aui-list-item-title {
      font-size: 0.9rem;
      position: relative;
      max-width: 100%;
      color: #212121;
      margin-left: 3%;
    }
    .aui-list {
      border-top: none;
    }
    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
      .aui-list {
        border: none;
        background-size: 100% 0px;
      }
    }
    *{
      -webkit-box-sizing: inherit;
              box-sizing: inherit;
              margin: 0 ;
              padding: 0 ;
    }
    .top-container{
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
    }
    .member_level{
      width: 2rem;
      background: #FDD96D;
      text-align: center;
      line-height: 1rem;
      color: #ffffff;
      border-radius: 5px;
    }

    </style>
</head>
<body style="height:100%;background:#f7f4f2">
<div id="blank" class="header" >
    <span class="title">直接分享用户</span>
</div>
<div id="app" class="top-container" v-cloak>
  <ul class="aui-list aui-media-list" >
    <li  class="aui-list-item aui-list-item-middle weui-cell" v-for="(item, index) in lists">
      <div class="aui-media-list-item-inner weui-cell__bd">
          <div class="aui-list-item-media wechat-avatar">
              <img :src="item.portrait || '../../image/portrait_moren.png'"/>
          </div>
          <div class="aui-list-item-inner">
              <div class="aui-list-item-text">
                <div class="member_level"  :style="getBg(item.level_id)">
                  {{getlevelname(item.level_id)}}
                </div>
                <div class="aui-list-item-title">{{item.nickname}}</div>
              </div>
              <div class="aui-list-item-text aui-font-size-12">{{item.cow}}头奶牛</div>
          </div>
      </div>
    </li>
  </ul>
  <div style="margin-top:60px" v-show="lists.length==0">
    <img v-src="'../../image/empty.png'" style="margin:0 auto;width:30%">
    <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">您还没有直接分享的人</div>
  </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script>

    var user;
    var vm;
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        showProgress();
        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            lists = ret.content;
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.myExtend, data, callback);
        addListeners();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                imgPath:'../../image/',
                lists:lists,
                BSImg: {
                    big: Vue.BSImg == 'big',
                    small: Vue.BSImg == 'small'
                },
            },
            computed:{
            },
            methods:{
            getBg: function (level_id) {
              var memberStyle = getMemberStyle(level_id);
              return {
                  background:memberStyle.level_bg_color
              }
            },
            getlevelname:function (level_id) {
              var memberStyle = getMemberStyle(level_id);
              return memberStyle.level_name

            }
          }
        });
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
    }

</script>
</html>
